<template>
  <div>
    <v-chart :forceFit="true" :height="props.Height" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" />
      <v-axis />
      <v-legend data-key="item" v-if="BaseRing" />
      <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
      <v-coord type="theta" />
    </v-chart>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import { Basis } from "../../../models/Chat/Pie";

const DataSet = require("@antv/data-set");
@Component
export default class Pie extends Vue {
  @Prop({ required: true }) props!: any;
  data: string = "";
  scale: any[] = [];
  pieStyle: Object = {
    stroke: "#fff",
    lineWidth: 1
  };
  BaseRing: boolean = false;
  labelConfig: any[] = [
    "percent",
    {
      formatter: (val, item) => {
        return item.point.item + ": " + val;
      }
    }
  ];
  formatter(n: string[]) {
    let data: any[] = [];
    n.map(item => {
      switch (item) {
        case "Base":
          //基础饼图
          data = [
            "percent",
            {
              formatter: (val, item) => {
                return item.point.item + ": " + val;
              }
            }
          ];
          break;
        //基础环图
        case "BaseRing":
          this.BaseRing = true;
          data = [
            "percent",
            {
              offset: -40,
              textStyle: {
                rotate: 0,
                textAlign: "center",
                shadowBlur: 2,
                shadowColor: "rgba(0, 0, 0, .45)"
              }
            }
          ];
          break;
        case "":
          break;
      }
    });
    this.labelConfig = data;
  }

  //图表地址:https://viserjs.github.io/demo.html#/viser/pie/basic-donut
  created() {
    // const list = ["BaseRing"];
    // this.formatter(list);
    this.scale = [
      {
        dataKey: "percent",
        min: 0,
        formatter: ".0%"
      }
    ];
    const dv = new DataSet.View().source(this.props.sourceData);
    dv.transform({
      type: "percent",
      field: "count",
      dimension: "item",
      as: "percent"
    });
    this.data = dv.rows;
  }
}
</script>
